<template>
    <basic-container>
        <el-form ref="queryForm"
                 :model="queryParams"
                 :inline="true"
                 label-width="80px">
            <el-form-item label="表名称"
                          prop="searchParams.search_eq_tableName">
                <el-input v-model="queryParams.searchParams.search_eq_tableName"
                          placeholder="请输入角色名称"/>
            </el-form-item>
            <el-form-item label="表描述"
                          prop="searchParams.search_eq_tableTitle">
                <el-input v-model="queryParams.searchParams.search_eq_tableTitle"
                          placeholder="请输入角色名称"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary"
                           icon="el-icon-search"
                           size="mini"
                           @click="handleQuery">搜索
                </el-button>
                <el-button icon="el-icon-refresh"
                           size="mini"
                           @click="resetQuery">重置
                </el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10"
                class="mb8">
            <el-col :span="1.5">
                <el-button type="primary"
                           icon="el-icon-download"
                           size="mini"
                           @click="handleExecute"
                >生成
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="primary"
                           icon="el-icon-upload"
                           size="mini"
                           @click="handleAdd"
                >导入
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                        type="success"
                        icon="el-icon-edit"
                        size="mini"
                        :disabled="single"
                        @click="handleUpdate"
                >编辑
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                        type="danger"
                        icon="el-icon-delete"
                        size="mini"
                        :disabled="multiple"
                        @click="handleDelete"
                >删除
                </el-button>
            </el-col>
        </el-row>
        <el-table v-loading="loading"
                  :data="userList"
                  @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center"/>
            <el-table-column label="ID" align="center" prop="id"/>
            <el-table-column label="表名称" align="center" prop="tableName"/>
            <el-table-column label="表描述" align="center" prop="tableComment"/>
            <el-table-column label="创建时间" align="center" prop="createTime" :formatter="uFormat"/>
            <el-table-column label="修改时间" align="center" prop="updateTime" :formatter="dFormat"/>
            <el-table-column label="操作"
                             align="center"
                             class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-row :gutter="10"
                            class="mb8">
                        <el-col :span="1.5">
                            <el-button size="small"
                                       type="text"
                                       icon="el-icon-edit"
                                       @click="handleUpdate(scope.row)"
                            >编辑
                            </el-button>
                        </el-col>
                        <el-col :span="1.5">
                            <el-button size="small"
                                       type="text"
                                       icon="el-icon-loading"
                                       class="deleteBtn"
                                       @click="synchro(scope.row)"
                            >同步
                            </el-button>
                        </el-col>
                        <el-col :span="1.5">
                            <el-button size="small"
                                       type="text"
                                       icon="el-icon-delete"
                                       class="deleteBtn"
                                       @click="handleDelete(scope.row)"
                            >删除
                            </el-button>
                        </el-col>
                        <el-col :span="1.5">
                            <el-button size="small"
                                       type="text"
                                       icon="el-icon-download"
                                       class="deleteBtn"
                                       @click="handleExecute(scope.row)"
                            >生成代码
                            </el-button>
                        </el-col>
                    </el-row>

                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total>0"
                    :total="total"
                    :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"/>


        <!-- 添加或编辑收费员信息对话框 -->
        <el-dialog :title="title[statusDialog]"
                   :visible.sync="open"
                   :width="width[statusDialog]"
                   append-to-body
                   :close-on-click-modal="false">
            <template v-if="statusDialog=='add'">
                <el-form ref="addQueryForm"
                         :model="addQueryParams"
                         :inline="true"
                         label-width="80px">
                    <el-form-item label="表名称"
                                  prop="tableName">
                        <el-input v-model="addQueryParams.tableName"
                                  placeholder="请输入角色名称"/>
                    </el-form-item>
                    <el-form-item label="表描述"
                                  prop="tableDescribe">
                        <el-input v-model="addQueryParams.tableDescribe"
                                  placeholder="请输入角色名称"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary"
                                   icon="el-icon-search"
                                   size="mini"
                                   @click="handleAddQuery">搜索
                        </el-button>
                        <el-button icon="el-icon-refresh"
                                   size="mini"
                                   @click="resetAddQuery">重置
                        </el-button>
                    </el-form-item>
                </el-form>
                <el-table v-loading="loading"
                          :data="addList"
                          @selection-change="handleAddSelectionChange">
                    <el-table-column type="selection" width="55" align="center"/>
                    <el-table-column label="ID" type="index" align="center" prop="id"/>
                    <el-table-column label="表名称" align="center" prop="tableName"/>
                    <el-table-column label="表描述" align="center" prop="tableDescribe"/>
                    <el-table-column label="创建时间" align="center" prop="createTime" :formatter="uFormat"/>
                    <el-table-column label="修改时间" align="center" prop="updateTime" :formatter="dFormat"/>
                </el-table>
                <pagination v-show="total>0"
                            :total="total"
                            :page.sync="addQueryParams.pageNum"
                            :limit.sync="addQueryParams.pageSize"
                            @pagination="listTablePage"/>

            </template>
            <template v-else>
                <el-tabs v-model="activeName" >
                    <el-tab-pane label="生成信息" name="first">
                        <el-form ref="eidtForm"
                                 :model="rowData"
                                 :rules="rules"
                                 label-width="120px">
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="实体类名称"
                                                  prop="className">
                                        <el-input v-model="rowData.className"
                                                  placeholder="请输入实体类名称"/>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="生成包路径"
                                                  prop="packageName">
                                        <el-input v-model="rowData.packageName"
                                                  placeholder="请输入生成包路径"/>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="生成模块名"
                                                  prop="moduleName">
                                        <el-input v-model="rowData.moduleName"
                                                  placeholder="请输入生成模块名"/>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="生成业务名"
                                                  prop="businessName">
                                        <el-input v-model="rowData.businessName"
                                                  placeholder="请输入生成业务名"/>
                                    </el-form-item>
                                </el-col>
                            </el-row>


                        </el-form>

                    </el-tab-pane>
                    <el-tab-pane label="字段信息" name="second">
                        <el-table v-loading="loading"
                                  :data="editList">
                            <el-table-column type="selection" width="55" align="center"/>
                            <el-table-column label="ID" type="index" align="center" prop="id"/>
                            <el-table-column label="字段" align="center" prop="columnName"/>
                            <el-table-column label="字段描述" align="center" prop="columnComment"/>
                            <el-table-column label="物理类型" align="center" prop="columnType"/>
                            <el-table-column label="实体类型" align="center" prop="javaType"/>
                            <el-table-column label="实体属性" align="center" prop="javaField"/>
                            <el-table-column label="必填" align="center" prop="isRequired" width="80">
                                <template slot-scope="scope">
                                    <el-checkbox v-model="scope.row.isRequired" true-label="1" false-label="0"
                                                 :checked="scope.row.isRequired!='0'"></el-checkbox>
                                </template>
                            </el-table-column>
                            <el-table-column label="插入" align="center" prop="isInsert" width="80">
                                <template slot-scope="scope">
                                    <el-checkbox v-model="scope.row.isInsert" true-label="1" false-label="0"
                                                 :checked="scope.row.isInsert!='0'"></el-checkbox>
                                </template>
                            </el-table-column>
                            <el-table-column label="编辑" align="center" prop="isEdit" width="80">
                                <template slot-scope="scope">
                                    <el-checkbox v-model="scope.row.isEdit" true-label="1" false-label="0"
                                                 :checked="scope.row.isEdit!='0'"></el-checkbox>
                                </template>
                            </el-table-column>
                            <el-table-column label="列表" align="center" prop="isList" width="80">
                                <template slot-scope="scope">
                                    <el-checkbox v-model="scope.row.isList" true-label="1" false-label="0"
                                                 :checked="scope.row.isList!='0'"></el-checkbox>
                                </template>
                            </el-table-column>
                            <el-table-column label="查询" align="center" prop="isQuery" width="80">
                                <template slot-scope="scope">
                                    <el-checkbox v-model="scope.row.isQuery" true-label="1" false-label="0"
                                                 :checked="scope.row.isQuery!='0'"></el-checkbox>
                                </template>
                            </el-table-column>
                            <el-table-column label="显示类型" align="center" prop="htmlType">
                                <template slot-scope="scope">
                                    <el-select v-model="scope.row.htmlType" placeholder="请选择">
                                        <el-option
                                                v-for="dict in htmlTypeOptions"
                                                :key="dict.dictValue"
                                                :label="dict.dictLabel"
                                                :value="dict.dictValue">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="字典类型" align="center" prop="dictType">
                                <template slot-scope="scope">
                                    <el-select v-model="scope.row.dictType" placeholder="请选择">
                                        <el-option
                                                v-for="dict in dictTypeOptions"
                                                :key="dict.dictType"
                                                :label="dict.dictName"
                                                :value="dict.dictType">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                        </el-table>

                    </el-tab-pane>

                </el-tabs>

            </template>

            <div slot="footer"
                 class="dialog-footer">
                <el-button type="primary"
                           @click="submitForm" v-if="statusDialog!='info'">确 定
                </el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>


    </basic-container>
</template>

<script>
    import {addGen, delGen, execute, listGen, listTablePage, synchro, updateGen} from "@/api/tool/gener";
    import {getTypeData,} from "@/api/system/dict/data";

    import {dateFormat} from '@/util/date'

    export default {
        data() {
            return {
                // 遮罩层
                loading: true,
                // 选中数组
                ids: [],
                addIds: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 总条数
                total: 0,
                // 用户信息表格数据
                userList: [],
                addList: [],
                editList: [],
                rowData:{},
                activeName: 'second',
                // 弹出层标题
                title: {
                    add: '导入生成表',
                    edit: '编辑生成表',
                },
                width: {
                    add: '60%',
                    edit: '70%',
                },
                statusDialog: "",
                htmlTypeOptions: [],
                dictTypeOptions: [],
                // 是否显示弹出层
                open: false,
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    searchParams:{
                        search_eq_tableName: undefined,
                        search_eq_tableTitle: undefined,
                    }
                },
                addQueryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    tableName: undefined,
                    tableDescribe: undefined,

                },
                rules:{
                    className: [
                        {required: true, message: "姓名不能为空", trigger: "blur"}
                    ],
                    packageName: [
                        {required: true, message: "姓名不能为空", trigger: "blur"}
                    ],
                    moduleName: [
                        {required: true, message: "姓名不能为空", trigger: "blur"}
                    ],
                    businessName: [
                        {required: true, message: "姓名不能为空", trigger: "blur"}
                    ],
                }
            }

        },
        created() {
            this.getList();
            this.listTablePage();
            this.getDicts("html_type").then(response => {
                this.htmlTypeOptions = response.data.data;
            });
            getTypeData().then(response => {
                this.dictTypeOptions = response.data.data;
            });

        },
        methods: {
            /** 搜索按钮操作 */
            handleQuery() {
                for (let key in this.queryParams.searchParams) {
                    if(this.queryParams.searchParams[key]!=undefined){
                        if (this.queryParams.searchParams[key] == "") {
                            this.queryParams.searchParams[key] = undefined;
                            continue;
                        }
                        if(this.queryParams.searchParams[key].length>0){
                            if(!this.queryParams.searchParams[key].constructor == Array){
                                if(!(this.queryParams.searchParams[key].replace(" ", "").trim().length > 0)){
                                    this.queryParams.searchParams[key] = undefined;
                                    continue;
                                }
                            }
                        }
                    }
                }
                this.getList();
            },
            handleAddQuery() {
                for (let key in this.addQueryParams) {
                    if(this.addQueryParams!=undefined){
                        if (this.addQueryParams[key] == "") {
                            this.addQueryParams[key] = undefined;
                        }
                    }
                }
                this.listTablePage();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
            /** 重置按钮操作 */
            resetAddQuery() {
                this.resetForm("addQueryForm");
                this.handleAddQuery();
            },
            // 取消按钮
            cancel() {
                this.open = false;
                this.editList = [];
                this.reset();
            },
            // 表单重置
            reset() {
                this.resetForm("addQueryForm");
            },
            /** 查询收费员信息列表 */
            getList() {
                this.loading = true;
                listGen(this.queryParams).then(response => {
                    const data = response.data;
                    if (response.status === 200 && data.code === "00") {
                        this.userList = data.data.rows;
                        this.total = data.data.total;
                    } else {
                        this.msgError(data.msg);
                    }
                    this.loading = false;
                });
            },
            listTablePage() {
                this.loading = true;
                listTablePage(this.addQueryParams).then(response => {
                    const data = response.data;
                    if (response.status === 200 && data.code === "00") {
                        this.addList = data.data.rows;
                    } else {
                        this.msgError(data.msg);
                    }
                    this.loading = false;
                });
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                // this.ids = selection.map(item => item.id)
                this.ids = selection;
                this.single = selection.length != 1;
                this.multiple = !selection.length;
            },
            // 多选框选中数据
            handleAddSelectionChange(selection) {
                // this.ids = selection.map(item => item.id)
                this.addIds = selection;
                this.single = selection.length != 1;
                this.multiple = !selection.length;
            },
            /** 新增按钮操作 */
            handleAdd() {
                this.reset();
                this.open = true;
                this.statusDialog = 'add';
            },
            /** 编辑按钮操作 */
            handleUpdate(row) {
                const data = row || this.ids[0];
                this.rowData=JSON.parse(JSON.stringify(data));
                this.editList = this.rowData.columns;
                this.open = true;
                this.statusDialog = 'edit';
            },
            /** 提交按钮 */
            submitForm: function () {
                if (this.statusDialog === 'edit') {
                    this.rowData.columns=this.editList;
                    updateGen(this.rowData).then(response => {
                        const data = response.data;
                        if (response.status === 200 && data.code === "00") {
                            this.msgSuccess("编辑成功");
                            this.open = false;
                            this.getList();
                        } else {
                            this.msgError(response.msg);
                        }
                    });
                } else {
                  if(!(this.addIds.length>0)){
                    this.msgError("未选中导入数据");
                    return
                  }
                    addGen(this.addIds).then(response => {
                        const data = response.data;
                        if (response.status === 200 && data.code === "00") {
                            this.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        } else {
                            this.msgError(response.msg);
                        }
                    });
                }
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                const userIds = row.id || this.ids;
                let tt = '';
                if (row.id == undefined) {
                    tt = '是否确认删除【' + this.ids.length + '】条数据吗?';
                } else {
                    tt = '是否确认删除为"' + row.tableName + '"的数据项?';
                }
                this.$confirm(tt, "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    return delGen(userIds);
                }).then(() => {
                    this.getList();
                    this.msgSuccess("删除成功");
                }).catch(function () {
                });
            },
            synchro(row) {
                this.$confirm('同步操作会重置数据是否确定同步生成数据表？', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    return synchro(row.id);
                }).then(() => {
                    this.msgSuccess("同步成功");
                    this.getList();
                }).catch(function () {
                });
            },
            handleExecute(row) {
                let data = [];
                let tt = '';
                if (row.id!=undefined) {
                    data.push(row);
                    tt = '是否确认生成为"' + row.tableName + '"的数据项?';
                } else {
                    if(!(this.ids.length>0)){
                      this.msgError("未选中生成数据");
                      return
                    }
                  data = this.ids;
                  tt = '是否确认生成【' + this.ids.length + '】条数据吗?';
                }
                this.$confirm(tt, "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    return execute(data);
                }).then(() => {
                  this.msgSuccess("生成成功");
                  this.getList();
                }).catch(function () {
                });
            },
            uFormat(row) {
                if (row.createTime == null) {
                    return "/";
                }
                return dateFormat(new Date(row.createTime));
            },
            dFormat(row) {
                if (row.updateTime == null) {
                    return "/";
                }
                return dateFormat(new Date(row.updateTime));
            }
        }
    };
</script>

<style>

</style>
